<template>
  <div class="messages-container">
    <h3>消息管理</h3>
    <div class="message" v-for="message in messages" :key="message.id">
      <div class="message-header">
        <div class="sender">{{ message.sender }}</div>
        <div class="time">{{ formatDate(message.time) }}</div>
      </div>
      <div class="message-content">{{ message.content }}</div>
      <div class="message-actions">
        <button v-if="!message.read" @click="$emit('mark-read', message.id)">标记为已读</button>
      </div>
    </div>
    <div v-if="!messages.length" class="empty-message">暂无消息</div>
  </div>
</template>

<script setup>
const props = defineProps(['messages'])
const formatDate = (dateString) => {
  const date = new Date(dateString)
  return date.toLocaleDateString('zh-CN')
}
</script>
<style scoped>
.message { margin-bottom: 15px; padding: 10px; border: 1px solid #ddd; border-radius: 4px; background: #f9f9f9; }
.message-header { display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 5px; }
.message-content { font-size: 15px; }
.message-actions { margin-top: 5px; }
</style>